<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { House, Warning, MapLocation, Check, PieChart, InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const isCollapse = ref(false)

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const handleLogout = () => {
  userStore.logout()
}

// 添加菜单点击处理
const handleMenuSelect = (index: string) => {
  router.push(index)
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header>
      <div class="header-left">
        <div class="collapse-btn" @click="toggleSidebar">
          <el-icon>
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                fill="currentColor"
                d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
              />
            </svg>
          </el-icon>
        </div>
        <div class="logo">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m149.162667 222.208l-1.536 2.56-147.626667 268.373334-149.162667-268.373334a21.333333 21.333333 0 0 0-35.84-1.28l-1.28 2.133334-85.333333 170.666666a21.333333 21.333333 0 0 0 8.96 28.8l2.346667 1.066667a21.333333 21.333333 0 0 0 28.8-8.96l1.066666-2.346667 67.84-135.68 149.162667 268.373334a21.333333 21.333333 0 0 0 35.84 1.28l1.28-2.133334 147.626667-268.373333 67.84 135.68a21.333333 21.333333 0 0 0 38.4 1.28l1.28-2.346667a21.333333 21.333333 0 0 0-8.96-28.8l-2.346667-1.066667-85.333333-170.666666a21.333333 21.333333 0 0 0-32.128-1.536z"
              fill="currentColor"
            />
          </svg>
          <h1>地质灾害信息系统</h1>
        </div>
      </div>
      <div class="header-right">
        <span class="username">{{ userStore.username }}</span>
        <el-dropdown>
          <span class="user-avatar">
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2z"
                fill="currentColor"
              />
            </svg>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5-32.6 32.5-70.5 58.1-112.7 75.9-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.4-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-32.6-32.5-58.1-70.4-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-0.4-12.3-6.7-12.3z"
                    fill="currentColor"
                  />
                  <path
                    d="M956.9 505.7L815 393.7c-5.3-4.2-13-0.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112c4.1-3.2 4.1-9.4 0-12.6z"
                    fill="currentColor"
                  />
                </svg>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @select="handleMenuSelect"
        >
          <!-- 菜单项 -->
          <el-menu-item index="/dashboard">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/home/disaster-report" v-if="userStore.role === 'guest'">
            <el-icon><Warning /></el-icon>
            <span>灾难上报</span>
          </el-menu-item>
          <el-menu-item index="/home/disaster-view" v-if="userStore.role === 'guest'">
            <el-icon><PieChart /></el-icon>
            <span>灾情查看</span>
          </el-menu-item>
          <el-menu-item index="/home/disaster-intro" v-if="userStore.role === 'guest'">
            <el-icon><InfoFilled /></el-icon>
            <span>灾害介绍</span>
          </el-menu-item>
          <el-menu-item index="/home/map-view" v-if="userStore.role === 'admin'">
            <el-icon><MapLocation /></el-icon>
            <span>灾情视图</span>
          </el-menu-item>
          <el-menu-item index="/home/disaster-confirm" v-if="userStore.role === 'admin'">
            <el-icon><Check /></el-icon>
            <span>灾情确认和信息同步</span>
          </el-menu-item>
          <el-menu-item index="/home/disaster-analysis" v-if="userStore.role === 'admin'">
            <el-icon><PieChart /></el-icon>
            <span>灾情统计分析</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  width: 100%;
}

.el-header {
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;

  .collapse-btn {
    font-size: 20px;
    cursor: pointer;
    margin-right: 20px;
    display: flex;
    align-items: center;

    .el-icon {
      width: 1em;
      height: 1em;
    }
  }

  .logo {
    display: flex;
    align-items: center;

    .icon {
      width: 30px;
      height: 30px;
      color: #409eff;
      margin-right: 10px;
    }

    h1 {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;

  .username {
    margin-right: 10px;
    font-size: 14px;
  }

  .user-avatar {
    cursor: pointer;
    display: flex;
    align-items: center;

    .icon {
      width: 24px;
      height: 24px;
      color: #606266;
    }
  }
}

.el-dropdown-menu {
  .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }
}

.el-aside {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar-menu {
  height: 100%;
  border-right: none;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
}
</style>
